
// 导入html-webpack-plugin，获取到插件对象:
var htmlwp = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        // 定义打包好的内容所存放的文件(该文件是动态生成的)及其路径：
        path: './src', // 定义打包好的文件的存放路径
        filename: 'build.js'  // 定义打包好的内容所存放的文件的文件名
    },
    module: {
        loaders: [
            {
                // 将当前项目中除【node_modules】外的所有的.js文件都要进行es6转es5操作
                test: /\.js$/,
                // loader: 'babel-loader?presets[]=es2015'  //如果将配置写在这里，将来在打包【.vue】文件时会报错
                loader: 'babel-loader',
                exclude: /node_modules/ // 不要转换node_modules中的js文件，提高打包性能
            },
            {
                // 打包css文件：
                test: /\.css$/,  // 正则匹配css文件
                loader: 'style-loader!css-loader'  // 表示先利用css-loader解析.css文件，再调用style-loader打包
            },
            {
                // 打包sass文件：
                // 注意：sass文件的打包依赖于【sass-loader】解析成原生的.css语法，所以打包sass文件必须要依赖于 ---> style-loader和css-loader
                test: /\.scss$/, // 正则匹配.scss文件
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                // 打包less文件：(同sass)
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            },
            {
                // 打包url()请求的资源文件：
                // 注意：url可能请求多个资源，所以在项目中通过url导入的资源扩展名必须配置到test对象中:
                test: /\.(png|jpg|gif|ttf)$/,
                // loader: 'url-loader'  // 这种配置会将图片变成base64的字符串存储到build.js中，如果图片很大的话，那么会造成build.js也比较大，加载时会导致效率低下，故：不建议使用
                loader: 'url-loader?limit=40000' // 限制图片的大小：如果小于40kb，则把它当做base64字符串存储到build.js中，如果大于40kb，则单独将图片存放到磁盘上，并将路径打包进build.js中
            },
            {
                // 打包【.vue】文件：
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new htmlwp({
            title: '首页',  // 生成的页面标题
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'index1.html'  // 根据index1.html这个模板来生成(这个文件必须自己创建)
        })
    ]
}